<template lang="pug">
.indexCard
    .game_interval
    .game_card(@mouseenter="show()" @mouseleave="hide()" @click="ToDetails()")
        img.game_card_header_img(:src="gi?.header_image")
        .spotlight_content.game_card_info
            span.game_release_date {{gi?.release_date.date}}
            .game_price_overview
                .discount_percent(v-show="!gi?.is_free") -{{  gi?.price_overview?.discount_percent}}%
                .discount_final {{  gi?.is_free?" Free To Play " :gi?.price_overview?.final_formatted}}
    .game_card_hide(v-if="seen" )
        .single
        .game_card_hide_name {{gi?.name}}
        span {{gi.release_date.date}}
        img(:src="gi?.screenshots[imgIndex]?.path_thumbnail"  )
        span User Tags
        .game_card_tags
            label(v-for="(item,index) in gi?.categories?.slice(0,gi?.categories.length/2)" ) {{item.description}}

</template>

<script setup lang="ts">
import type {PropType} from "vue";
import {onMounted, onUnmounted, ref} from "vue";
import {useRouter} from "vue-router";
import type {GameObj} from "../../../utils/types/Game";

const show = () => {
    seen.value = true
}
const hide = () => {
    seen.value = false
}
const props = defineProps({
    gi: {
        type: Object as PropType<GameObj>,
        required: false,
    },
})
let seen = ref(false)

const router = useRouter();
const ToDetails = () => {

    const promise = router.resolve({
        name: `game`,
        params: {
            appid: props.gi?.steam_appid,
        }
    });
    window.open(promise.href, '_blank');
    // router.push({
    //     name: `game`,
    //     params: {
    //         appid: props.gi?.steam_appid,
    //     }
    // })
}

let imgIndex = ref<number>(0)
let interval: any = null

function setTime() {
    let index = 0
    interval = setInterval(() => {
        let length = props.gi?.screenshots?.length;
        index++
        imgIndex.value = index % (length ?? 1)
    }, 1500);

}

onMounted(() => {
    setTime()
})
onUnmounted(() => {
    clearInterval(interval)
})

</script>


<style lang="sass" scoped>

@import "../../../assets/sass/game/indexCard"

</style>
